<template>
  <div class="floor-layout tpl-64">
    <div class="layout-main">
      <layout-item :block="data.blockList[0]" @handle-edit="handleEditBlock(0)">
        <div class="search_box" :style="`height:${data.blockStyle.height + 10}px;`">
          <div class="search_box_view" :style="`padding-left:${data.blockStyle.pagePadding}px;padding-right:${data.blockStyle.pagePadding}px;background-color:${data.blockStyle.backColor};`">
            <div class="floor_search">
              <div class="floor_search_filed" :class="`floor_search_filed_${data.blockClass}`" :style="`background-color:${data.blockStyle.blockBack};`">
                <i class="el-icon-search" :style="`color:${data.blockStyle.fontColor};`"></i>
                <div class="van-cell van-cell--borderless van-field" :style="`height:${data.blockStyle.height}px;`">
                  <div class="van-cell_value">
                    <div class="van-field_body">
                      <input type="search" placeholder="搜索商品" class="van-field_control" :style="`text-align:${data.blockStyle.textAlign};color:${data.blockStyle.fontColor};`">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </layout-item>
    </div>
  </div>
</template>

<script>
  import mixin from '../mixin'

  export default {
    name: 'tpl_64',
    mixins: [mixin],
    title: '商品搜索',
    dataTpl: {
      tpl_id: 64,
      blockList: [
        { block_type: 'SEARCH', block_value: '', block_opt: '' }
      ],
      blockClass: 'circle', // rect, circle
      blockStyle: {
        pagePadding: 15,
        textAlign: 'left',
        height: 40,
        backColor: '#f2f2f2',
        blockBack: '#ffffff',
        fontColor: '#999999'
      }
    }
  }
</script>